<template>
	<view class="page">
		<con-venues :itemChooselist='itemChooselist' :venuelist='venuelist' @confirm="confirm1"></con-venues>
		<view style="position: fixed;z-index: 999;width: 100%;top: 120rpx;">
			<view class="box_11">
				<view class="image-wrapper_7">
					<u-search @search="search" @custom="search" placeholder="搜索" :showAction="false" v-model="keyword">
					</u-search>
				</view>
				<view class="label8_list" @click="openFilter">
					<uni-icons type="settings" size="16"></uni-icons>
					<view class="label_88">
						<text>筛选</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 主内容区 -->
		<view class="content">
			<!-- 课程列表 -->
			<view class="course-list">
				<block>
					<view v-for="(classroom, index) in Cardlist" :key="index" class="course-card"
						@tap="openClassDetail(classroom)">
						<view class="card-header">
							<view class="class-info" style="width: 75vw;">
								<text class="class-name">
									{{classroom.course_item_name}}
								</text>
							</view>
							<view class="" style="color: #ff0000 ;font-size: 26rpx;">
								{{classroom.course_price}}
							</view>
						</view>

						<view class="card-body">
							<view class="course-info">
								<view class="">
									<text class="class-id">ID: {{classroom.item_id}}</text>
									<text class="class-id">{{classroom.course_mode_type_name}}</text>
									<text class="class-id">{{classroom.course_name}}</text>
								</view>
							</view>

							<view class="teacher-info">
								<view class="info-item">
									<uni-icons type="location" size="16"></uni-icons>
									<text>{{classroom.area_name}}</text>
								</view>
								<view class="info-item">
									<uni-icons type="calendar" size="16"></uni-icons>
									<text>{{classroom.hour_num}}课时</text>
								</view>
								<view class="info-item">
									<!-- <uni-icons type="person" size="16"></uni-icons> -->
									<text>{{classroom.name}}</text>
								</view>
							</view>

							<!-- <view class="hours-info">
								<view class="info-item">
									<text>基准单价: {{classroom.standard_price || 0}}</text>
								</view>
								<view class="info-item">
									<text :class="{'warning': (classroom.less_scheduled_hour <3) }">
										最低单价: {{(classroom.bottom_price || 0)}}
									</text>
								</view>
								<view class="info-item">
									<text>所属机构: {{classroom.venue_name || 0}}</text>
								</view>
							</view> -->
							<view class="" style="margin-top: 20rpx;">
								<view class="">
									<view class="d-flex flex-row" style=" justify-content: flex-end">
										<view  @click="ondelete(classroom, index)" class="d-flex flex-row align-center justify-center" style="width: 67px;height: 26px;color: #ffffff;font-size: 12px;text-align: center;border-radius: 5px;line-height: 26px;background-color: #53c557;margin-right: 5px;">
											<view class="" style="margin-left: 10rpx;font-size: 22rpx;">
												删除
											</view>
										</view>
										<view  @click="onedit(classroom, index)" class="d-flex flex-row align-center justify-center" style="width: 67px;height: 26px;color: #ffffff;font-size: 12px;text-align: center;border-radius: 5px;line-height: 26px;background-color: #4c9dff;">
											<view class="" style="margin-left: 10rpx;font-size: 22rpx;">
												编辑
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		
		<view class="d-flex flex-row justify-space-between justify-center align-center"
			style="position: fixed;bottom: 0;height: 120rpx;background-color: #fff;width: 100%;padding: 0 8%;z-index: 99;">
			<view class="" @click="piliang"
				style="width: 45%;height: 80rpx;background: #ffffff;color: #ec652b;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;border:#ec652b 1rpx solid">
				批量操作
			</view>
			<view class="" @click="addculum"
				style="width: 45%;height: 80rpx;background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));color: #ffffff;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;">
				添加课程
			</view>
		</view>

		<u-popup @touchmove.stop :show="showFilterPopup" @close="closehomeInfo" closeOnClickOverlay mode="right">
			<scroll-view class="filter-content" style="height: 100vh;width: 60vw;" scroll-y>
				<view class="filter-item">
					<text class="filter-label">校区选择</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view :class="['week-item', selectId1 === index? 'active' : '']"
								v-for="(item,index) in weekList1" :key="index" @click="timesSelect1(item,index)">
								{{item.venue_name}}
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="filter-item">
					<text class="filter-label">班型</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view :class="['week-item', selectId6 === index? 'active' : '']"
								v-for="(item,index) in weekList6" :key="index" @click="timesSelect6(item,index)">
								{{item.enum_name}}
							</view>
						</view>
					</view>
				</view> -->
				<view class="filter-item">
					<text class="filter-label">项目</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="['week-item', selectId2 === index? 'active' : '']"
								v-for="(item,index) in weekList2" :key="index" @click="timesSelect2(item,index)">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				
					<view class="filter-item">
					<text class="filter-label">状态</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="['week-item', selectId3 === index? 'active' : '']"
								v-for="(item,index) in weekList3" :key="index" @click="timesSelect3(item,index)">
								{{item}}
							</view>
						</view>
					</view>
				</view>
				<view class="filter-item">
					<text class="filter-label">课包类型</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="['week-item', selectId4 === index? 'active' : '']"
								v-for="(item,index) in weekList4" :key="index" @click="timesSelect4(item,index)">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="filter-item">
					<text class="filter-label">课程</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="['week-item', selectId5 === index? 'active' : '']"
								v-for="(item,index) in weekList5" :key="index" @click="timesSelect5(item,index)">
								{{item.course_name}}
							</view>
						</view>
					</view>
				</view> -->
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	const train = require("@/api/train/index.js");
	export default {
		data() {
			return {
				selected_Tab: '',
				currentTab: 0,
				viewType: 'week',
				showFilterPopup: false,
				selectedType: '',
				selectedCampus: '',
				selectedStatus: '',
				selectedTeacher: '',
				courses: [],
				selectedClass: null,
				teacherAvatar: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/3381fedd3d529ba2ef8f9d8f4d3794fc4b9021ad.png',
				studentAvatar: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/782cf5cde63dddaa6434ab862fc4808066e329b2.png',
				enrollDetailPopup: false,
				selectId1: null,
				weekList1: [],
				selectId2: null,
				weekList2: [],
				selectId3: null,
				weekList3: [],
				selectId4: null,
				weekList4: [],
				selectId5: null,
				weekList5: [],
				selectId6: null,
				weekList6:[],
				ongoingCount: 2,
				finishedCount: 0,
				listQuery: { //分页
					pageNo: 1,
					pageSize: 10,
				},
				totalPage: '', //几页
				itemChooselist: {},
				venuelist: [],
				keyword: '',
				Cardlist: [],
				area_id: '', //所属校区
				train_program: '', //项目
				status: '', //状态
				coach_id: '', //教练
				course_id: '', //课程
				class_name: '', //班级名称
				reg_face:false,
				regface:'',
				train_enum_id:'',
				status12:'',
				venue_id:''
			};
		},
		onLoad() {
			var data = uni.getStorageSync("wqzdy");
			var items = JSON.parse(data)
			this.venuelist = items
			// 处理itemChooselist的逻辑
			if (this.venuelist.length > 0) {
				this.itemChooselist = this.venuelist[0]
				this.venue_id = this.venuelist[0].id
			} else {
				this.itemChooselist = {}; // 或者设置为其他默认值
			}
		},
		onShow() {
			this.cls_options()
		},
		methods: {
			onedit(classroom, index) {
				uni.navigateTo({
					url: `../addculum/index?selectionArr=${encodeURIComponent(JSON.stringify(classroom))}` + "&status=" + 2 + "&venue_id=" + this.venue_id
				})
			},
			ondelete(classroom, index) {
				let that = this
				uni.showModal({
					title: '提示',
					// 提示文字
					content: '是否删除！',
					// 取消按钮的文字自定义
					cancelText: "取消",
					// 确认按钮的文字自定义
					confirmText: "确定",
					//删除字体的颜色 
					confirmColor: '#000000',
					//取消字体的颜色
					cancelColor: '#999',
					success: function(res) {
						if (res.confirm) {
							let params = {
								id: classroom.item_id,
								status: -1
							};
							train.traindel(params).then(res => {
								if (res.code == 1) {
									uni.$u.toast(res.info);
									setTimeout(() => {
										that.cls_options()
									}, 1000)
								}
							})
						} else {}
					}
				})
			},
			addculum() {
				uni.navigateTo({
					url: "../addculum/index?status="  + 1 + "&venue_id=" + this.venue_id
				})
			},
			piliang(){
				uni.navigateTo({
					url: '../../page_admin/coach-side/class-home/class-sub/class-add'
				})
			},
			checkboxChange(event) {
				console.log('复选框的值发生变化：', event);
				 this.reg_face = event?1:''; 
				 this.regface = event?1:'';
				 this.cls_options()
			},
			async cls_options() {
				let params = {
					venue_id: this.venue_id,
				};
				let res = await train.cls_options(params);
				if (res.code == 1) {
					this.weekList1 = res.data.areaList
					this.weekList2 = res.data.projectList
					this.weekList3 = res.data.opStatusList
					this.weekList4 = res.data.courseTypeList
					this.weekList5 = res.data.courseList
					this.weekList6 = res.data.trainEnumList
					this.selected_Tab = res.data.statusList[0].id
					this.status = res.data.statusList[0].id
					console.log(this.status, 'this.status222')
					this.trainpackage()
				}
			},
			
			confirm1(data) {
				this.venue_id = data
			    console.log(data, 'data');
			    // 直接根据接收到的 id 在 venuelist 中查找对应的场馆对象
			    const selectedItem = this.venuelist.find(item => item.id === data);
			    if (selectedItem) {
			        // 将找到的场馆对象赋值给 itemChooselist
			        this.itemChooselist = selectedItem;
			    } else {
			        console.log(`未找到 id 为 ${data} 的场馆对象`);
			    }
				this.trainpackage()
			    console.log(this.itemChooselist, 'this.itemChooselist');
			},
			async trainpackage() {
				let that = this;
				if (this.listQuery.pageNo == 1) that.Cardlist = [];
				let params = {
					venue_id: this.venue_id,
					page: this.listQuery.pageNo,
					pageSize: this.listQuery.pageSize,
					course_name:this.keyword,
					area_id:this.area_id,
					train_program:this.train_program,
					course_mode_type:this.coach_id,
					status:this.status12,
				};
				let res = await train.trainpackage(params);
				if (res.code == 1) {
					that.Cardlist = that.Cardlist.concat(res.data.list.data); //将数据拼接在一起
					that.totalPage = res.data.list.last_page
				}
			},
			onReachBottom() {
				if (this.totalPage <= this.listQuery.pageNo) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				this.trainpackage()
			},
			selectedTab(item, index) {
				this.listQuery.pageNo = 1
				this.Cardlist = []
				this.selected_Tab = item.id
				this.status = item.id
				this.trainpackage()
			},
			search(e) {
				console.log(e, 'e')
				this.keyword = e
				this.trainpackage()
			},
			timesSelect1(item, index) {
				if (this.selectId1 === index) {
					this.selectId1 = null;
					this.area_id = ''
				} else {
					this.selectId1 = index
					this.area_id = item.id
				}
				this.trainpackage()
			},
			timesSelect2(item, index) {
				if (this.selectId2 === index) {
					this.selectId2 = null;
					this.train_program = ''
				} else {
					this.selectId2 = index
					this.train_program = item.id
				}
				this.trainpackage()
			},
			timesSelect6(item, index) {
				if (this.selectId6 === index) {
					this.selectId6 = null;
					this.train_enum_id = ''
				} else {
					this.selectId6 = index
					this.train_enum_id = item.id
				}
				this.trainpackage()
			},
			timesSelect3(item, index) {
				if (this.selectId3 === index) {
					this.selectId3 = null;
					this.status12 = ''
				} else {
					this.selectId3 = index
					this.status12 = index
				}
				this.trainpackage()
			},
			timesSelect4(item, index) {
				if (this.selectId4 === index) {
					this.selectId4 = null;
					this.coach_id = ''
				} else {
					this.selectId4 = index
					this.coach_id = item.id
				}
				this.trainpackage()
			},
			timesSelect5(item, index) {
				if (this.selectId5 === index) {
					this.selectId5 = null;
					this.course_id = ''
				} else {
					this.selectId5 = index
					this.course_id = item.id
				}
				this.trainpackage()
			},
			getStatusType(status) {
				switch (status) {
					case '教学中':
						return 'success';
					case '未开班':
						return 'warning';
					default:
						return 'default';
				}
			},
			closeInfo() {
				this.enrollDetailPopup = false
			},
			openFilter() {
				this.showFilterPopup = true;
			},
			closehomeInfo() {
				this.showFilterPopup = false;
			},
			openClassDetail(classroom) {
				this.selectedClass = classroom;
				this.enrollDetailPopup = true
				// uni.navigateTo({
				// 	url: './detail'
					
				// })
				uni.navigateTo({
					url: `./detail?selectionArr=${encodeURIComponent(JSON.stringify(classroom))}` + "&status=" + 1 + "&venue_id=" + this.venue_id
				})
			},

			onTabChange(e) {
				this.currentTab = e;
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.page {
		background-color: #f5f5f5;
		height: 100vh;
	}

	.box_11 {
		width: 100%;
		height: 110rpx;
		display: flex;
		flex-direction: row;
		background: #ffffff;
		padding: 0 20rpx;

		// .image-wrapper_7 {
		// 	width: 541rpx;
		// 	height: 60rpx;
		// 	flex-direction: row;
		// 	display: flex;
		// 	margin-top: 15rpx;
		// }
		.image-wrapper_7 {
			position: absolute;
			left: 30rpx;
			top: 30rpx;
			width: 600rpx;
			height: 62rpx;
			flex-direction: row;
			display: flex;
		}

		.label_list {
			display: flex;
			flex-direction: column;
			position: absolute;
			justify-content: center;
			/* 相对父元素水平居中 */
			align-items: center;
			/*  子元素相对父元素垂直居中 */
			right: 90rpx;
			width: 80rpx;
			top: 27rpx;

			.label_7 {
				width: 36rpx;
				height: 36rpx;
			}

			.label_77 {
				width: 60rpx;
				height: 36rpx;
				color: #333333;
				font-size: 26rpx;
				text-align: center;
			}
		}

		.label8_list {
			display: flex;
			flex-direction: column;
			position: absolute;
			justify-content: center;
			/* 相对父元素水平居中 */
			align-items: center;
			/*  子元素相对父元素垂直居中 */
			right: 20rpx;
			width: 80rpx;
			top: 27rpx;

			.label_8 {
				width: 36rpx;
				height: 36rpx;
			}

			.label_88 {
				width: 60rpx;
				height: 36rpx;
				color: #333333;
				font-size: 26rpx;
				text-align: center;
			}
		}
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.title {
		font-size: 32rpx;
		font-weight: 500;
	}

	.content {
		padding-top: 50rpx;
		padding-bottom: 32rpx;
	}

	.tab-filter {
		background-color: #ffffff;
		padding: 0 32rpx 20rpx 32rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.tabs {
		display: flex;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.tab-item {
		padding: 16rpx 20rpx;
		margin-right: 32rpx;
		position: relative;
	}

	.tab-item.active {
		color: #2979ff;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: -2rpx;
		left: 0;
		right: 0;
		height: 4rpx;
		background-color: #2979ff;
	}

	.filter {
		display: flex;
		justify-content: flex-end;
		margin-top: 16rpx;
	}

	.course-list {
		padding: 32rpx;
	}

	.course-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.class-name {
		font-size: 32rpx;
		font-weight: 500;
	}

	.class-name.warning {
		color: #ff4d4f;
	}

	.class-name.warning1 {
		color: #3083ff;
	}

	.class-id {
		font-size: 24rpx;
		color: #999999;
		margin-right: 10rpx;
		background-color: #f5f5f5;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
	}

	.class-desc {
		font-size: 24rpx;
		color: #999999;
		margin-top: 8rpx;
		display: block;
	}

	.card-body {
		margin-top: 16rpx;
	}

	.course-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.course-name {
		font-size: 28rpx;
		color: #666666;
		margin-left: 10rpx;
	}

	.course-date {
		font-size: 24rpx;
		color: #999999;
	}

	.teacher-info,
	.hours-info {
		display: flex;
		gap: 32rpx;
		margin-top: 16rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #666666;
	}

	.teacher-avatar {
		width: 48rpx;
		height: 48rpx;
		border-radius: 24rpx;
		margin-right: 8rpx;
	}

	.warning {
		color: #ff4d4f;
	}

	.warning1 {
		color: #3083ff;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 64rpx 32rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.empty-image {
		width: 240rpx;
		height: 240rpx;
	}

	.empty-text {
		color: #999999;
		font-size: 28rpx;
		margin: 32rpx 0;
	}

	.filter-content {
		background-color: #ffffff;
		padding: 20rpx 10rpx 20rpx 20rpx;
		border-radius: 32rpx 32rpx 0 0;
	}

	.filter-item {
		margin-bottom: 24rpx;
	}

	.item {
		// padding: 29rpx 30rpx 30rpx;
		padding: 0 20rpx 20rpx 20rpx;

		.atinput {
			// border: #EBECEE 1rpx solid;
			font-size: 24rpx;
			height: 60rpx;
			width: 600rpx;
			padding-left: 20rpx;
		}

		.item-title {
			color: rgb(153, 153, 153);
			font-size: 28rpx;
			font-weight: 500;
			margin-bottom: 20rpx;
		}

		.value {
			color: rgb(51, 51, 51);
			font-size: 28rpx;
			font-weight: 500;
		}

		.time-cell {
			color: rgb(51, 51, 51);
			font-size: 28rpx;
			font-weight: 500;
			justify-content: flex-start;

			.time {
				width: 49%;

				&:last-of-type {
					margin-left: 20rpx;
				}
			}
		}

		.week-list {
			flex-direction: row;
			width: 100%;
			font-size: 24rpx;
			flex-wrap: wrap;
			display: flex;

			.week-item {
				padding: 15rpx 0;
				background-color: rgb(243, 243, 243);
				border-radius: 5rpx;
				text-align: center;
				color: rgb(51, 51, 51);
				font-size: 24rpx;
				font-weight: 500;
				border: solid 2rpx transparent;
				box-sizing: border-box;
				padding: 6rpx 12rpx;
				margin-top: 20rpx;
				margin-right: 20rpx;
			}

			.active {
				color: rgba(255, 98, 0, 1);
				background-color: rgba(255, 65, 5, 0.1);
				// border: solid 2rpx rgb(99, 93, 247);
				position: relative;
			}

			.active1 {
				color: rgba(255, 98, 0, 1);
				background-color: rgba(255, 65, 5, 0.1);
				// border: solid 2rpx rgb(99, 93, 247);
				position: relative;
			}

			.active2 {
				color: rgba(255, 98, 0, 1);
				background-color: rgba(255, 65, 5, 0.1);
				// border: solid 2rpx rgb(99, 93, 247);
				position: relative;
			}

			.check {
				color: rgb(51, 51, 51);
				font-size: 24rpx;
				position: absolute;
				bottom: 10rpx;
				right: 0;
			}
		}
	}

	.filter-label {
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 16rpx;
		display: block;
	}

	.view-type {
		display: flex;
		gap: 16rpx;
	}

	.detail-content {
		background-color: #ffffff;
		border-radius: 32rpx 32rpx 0 0;
		padding: 32rpx;
		max-height: 80vh;
	}

	.detail-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
	}

	.detail-title {
		font-size: 32rpx;
		font-weight: 500;
	}

	.tab-content {
		margin-top: 32rpx;
	}

	.schedule-item,
	.student-item,
	.record-item {
		display: flex;
		justify-content: space-between;
		padding: 24rpx 0;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.schedule-time,
	.student-info,
	.record-info {
		display: flex;
		flex-direction: column;
	}

	.date {
		font-size: 28rpx;
	}

	.time {
		font-size: 24rpx;
		color: #999999;
		margin-top: 8rpx;
	}

	.schedule-status {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.attendees {
		font-size: 24rpx;
		color: #999999;
	}

	.student-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
	}

	.student-detail,
	.record-detail {
		margin-left: 16rpx;
	}

	.student-name {
		font-size: 28rpx;
		font-weight: 500;
	}

	.student-phone,
	.record-time {
		font-size: 24rpx;
		color: #999999;
		margin-top: 8rpx;
	}

	.student-hours {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		font-size: 24rpx;
		color: #666666;
		gap: 8rpx;
	}

	.record-hours {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.record-hours .course-name {
		font-size: 28rpx;
		font-weight: 500;
	}

	.record-hours .hours {
		font-size: 24rpx;
		color: #2979ff;
		margin-top: 8rpx;
	}

	.record-summary {
		text-align: right;
		padding: 24rpx 0;
		font-size: 28rpx;
		color: #666666;
	}

	.storepopup {
		.enroll-detail-popup {
			// width: 600rpx;
			// background: #ffffff;
			// border-radius: 16rpx;
			overflow: hidden;
		}

		.enroll-detail-title {
			font-size: 16px;
			color: #333333;
			font-weight: 500;
			text-align: left;
			padding: 30rpx;
			border-bottom: 1px solid #f0f0f0;
			display: flex;
			flex-direction: row;
		}

		.enroll-detail-content {
			padding: 30rpx;
			max-height: 800rpx;
			overflow-y: auto;
		}

		.detail-item {
			display: flex;
			align-items: flex-start;
			margin-bottom: 24rpx;
			line-height: 1.5;
		}

		.detail-item:last-child {
			margin-bottom: 0;
		}

		.detail-label {
			width: 140rpx;
			flex-shrink: 0;
			color: #999999;
			font-size: 14px;
		}

		.detail-value {
			flex: 1;
			color: #333333;
			font-size: 14px;
		}

		.remark-item {
			align-items: flex-start;
		}

		.remark-item .detail-value {
			word-break: break-all;
		}

		.enroll-detail-footer {
			padding: 20rpx 30rpx;
			border-top: 1px solid #f0f0f0;
		}

		.close-btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #007AFF;
			color: #ffffff;
			font-size: 16px;
			border-radius: 8rpx;
			border: none;
		}
	}
</style>